<template>
<div class="my-supplier"
        v-loading="loading"
        :element-loading-text="'正在' + loadingText + '...'"
>
    <pro-form-table
        title="待办处理"
        checkedbox-text="选择当前搜索条件下全部数据"
        :table-config="tableConfig"
        :page-config="pageConfig"
        ref="proFormTable"
        :loadingText="loadingText"
        :form-config="formConfig"
        >
        <template v-slot:connector>
            <el-table-column label="提交人" align="center" width="160">
                <template slot-scope="scope">
                    <p class="name">{{scope.row.fullName}}</p>
                    <span class="phone">{{scope.row.phone}}</span>
                </template>
            </el-table-column>
        </template>
        <template v-slot:pushErpStatus>
            <el-table-column label="ERP推送状态" align="center" width="140">
                <template slot-scope="scope">
                    <span class="name">{{scope.row.pushErpStatus && scope.row.pushErpStatus.description}}</span>
                    <el-popover v-if="scope.row.pushErpStatus && scope.row.pushErpStatus.code === 1002" trigger="hover" width="150" placement="right">
                        <span>{{scope.row.pushErpMsg}}</span>
                        <span class="el-icon-info" style="margin-left:5px;" slot="reference"></span>
                    </el-popover>
                </template>
            </el-table-column>
        </template>
        <template v-slot:btns>
            <div v-if="tableConfig.table.selectedRow">
                <!-- v-if="$permission(['supplierInfo_edit'])" -->
                <el-button
                @click="$router.push('/supplier/add')">新增供应商</el-button>
                <el-button
                @click="onExport" :disabled="!tableConfig.table.selectedRow.length">数据导出</el-button>
                <el-button
                @click="$router.push('/supplier/import')">导入供应商</el-button>
                <el-button @click="onPushErp"
                :disabled="!tableConfig.table.selectedRow.length">推送erp</el-button>
                <el-button @click="pullErpStatus"
                :disabled="!tableConfig.table.selectedRow.length">获取erp状态</el-button>
            </div>
        </template>
        <template v-slot:operate>
            <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="140">
            <!-- v-if="$permission(['supplierInfo_view', 'supplierInfo_edit','supplierInfo_del'])" -->
                <template slot-scope="scope">
                    <el-link
                        size="small"
                    >查看</el-link>
                    <el-link
                        size="small"
                        @click="remove(scope.row)"
                    >删除</el-link>
                    <el-link
                        size="small"
                        @click="enabledStatus(scope.row)"
                    >禁用</el-link>
                </template>
            </el-table-column>
        </template>
    </pro-form-table>
</div>
</template>

<script>
export default {
    name: 'supplierList',
    data () {
        return {
            tableConfig: {
                loading: false,
                checkAll: false,
                noDataText: '没有找到相关数据~',
                table: {
                    heigth: '',
                    data: [],
                    border: false,
                    stripe: true,
                    'row-key': (row) => row.id,
                    'selection-key': 'id',
                    // selectedRow: [],
                    // unSelectedRow: []
                },
                columns: [
                    // { type: 'selection', align: 'center', fixed: 'left', 'reserve-selection': true },
                    { label: '序号', prop: 'id', 'show-overflow-tooltip': true, 'min-width': '130px' },
                    { label: '异常单号', prop: 'supplierNo', 'min-width': '160px' },
                    { label: '异常类型', prop: 'supplierMold', 'min-width': '130px' },
                    { label: 'SKU', prop: 'supplierNo', 'min-width': '180px' },
                    { label: '数量', prop: 'registeredCapital', 'min-width': '130px' },
                    { label: '提交人', prop: 'connector', slot: 'connector' },
                    // { label: 'erp推送状态', slot: 'pushErpStatus', 'min-width': '130px' },
                    { label: '提交时间', prop: 'createTime', 'min-width': '180px' },
                    { slot: 'operate', 'min-width': '160px' } // 操作列
                ],
                tableEvents: {
                    // 'selection-change': this.handleSelectionChange
                },
                tableMethods: {
                    toggleSelection (rows) {
                        if (this.$refs.proTable.$refs.proTable) {
                            if (rows) {
                                rows.forEach(row => {
                                    this.$refs.proTable.$refs.proTable.toggleRowSelection(row)
                                })
                            } else {
                                this.pageConfig.attr['current-page'] = 1
                                this.$refs.proTable.$refs.proTable.clearSelection()
                            }
                        }
                    }
                }
            },
            pageConfig: {
                attr: {
                    'current-page': 1,
                    'total': 0
                },
                event: {
                    'current-change': this.handleCurrentChange,
                    'size-change': this.handleSizeChange

                }
            },
            formConfig: {
                form: {
                    inline: true,
                    'label-width': '90px',
                    model: {
                        supplierNameOrErpcode: '',
                        settlementMnode: '',
                        cooperationMnode: '',
                        supplierMold: '',
                        supplierGrade: '',
                        pushErpStatus: '',
                        state: '',
                        time: null
                    }
                },
                formItems: [
                    {
                        prop: 'supplierNameOrErpcode',
                        label: '单号',
                        innerEl: {
                            elType: 'input',
                            attr: {
                                placeholder: '单号',
                                type: 'input',
                                maxlength: 30
                            }
                        }
                    },
                    {
                        prop: 'settlementMnode',
                        label: '仓库',
                        innerEl: {
                            elType: 'select',
                            options: [],
                            attr: {
                                multiple: false,
                                placeholder: '请选择仓库',
                                disabled: false,
                                showAll: true,
                                props: {
                                    label: 'description',
                                    value: 'code'
                                }
                            },
                            // remotePagination: {
                            //     url: 'http://yapi.yunzhonghe.com/mock/goods/basicData/getData/authskip',
                            //     params: {
                            //         codeList: 1024
                            //     },
                            //     operationCode: 'supplierInfo_page'
                            // }
                        }
                    },
                    {
                        prop: 'cooperationMnode',
                        label: '类型',
                        innerEl: {
                            elType: 'select',
                            options: [
                                { value: '', label: '全部' },
                                { value: 1001, label: '集采+代发' },
                                { value: 1002, label: '代发' },
                                { value: 1003, label: '集采' },
                                { value: 1009, label: '其他' }
                            ],
                            attr: { multiple: false, placeholder: '请选择类型' }
                            // remotePagination: {
                            //     url: '/operation/customer/page',
                            //     operationCode: 'draft_order_save'
                            // }
                        }
                    },
                    {
                        prop: 'time',
                        label: '时间',
                        innerEl: { elType: 'datePicker', attr: { type: 'datetimerange' } }
                    },
                    {
                        innerEl: {
                            elType: 'button',
                            'text': '搜索',
                            isCtrDisable: false,
                            attr: {},
                            event: {
                                click: () => this.searchBtnClick()
                            }
                        }
                    },
                    {
                        innerEl: {
                            elType: 'button',
                            text: '重置',
                            isReset: true,
                            attr: {
                            }
                        }
                    },
                    {
                        slot: 'btns'
                    }
                ]
            },
            loading: false,
            loadingText: '导出'
        }
    },
    methods: {
        getTableData () {
            this.tableConfig.loading = true
            let data = {
                currentPage: this.pageConfig.attr['current-page'] || 1,
                pageSize: this.pageConfig.attr['page-size'] || 20
            }
            data = this.filterParams(data)
            this.$http.get('http://yapi.yunzhonghe.com/mock/250/goods/supplierInfo/page', {params: data}).then(res => {
                this.tableConfig.loading = false
                this.pageConfig.attr['current-page'] = res.result.page.currentPage
                this.pageConfig.attr['page-size'] = res.result.page.pageSize
                this.pageConfig.attr['total'] = res.result.page.totalRow
                this.tableConfig.table.data = res.result.records
            }).catch(() => {
                this.tableConfig.loading = false
            })
        },
        filterParams (options) {
            options = {
                ...options,
                ...this.formConfig.form.model,
                currentPage: this.pageConfig.attr['current-page'],
                pageSize: this.pageConfig.attr['page-size']
            }
            let params = {}
            for (const key in options) {
                if (options[key]) {
                    params[key] = options[key]
                }
                if (options[key] instanceof Array) {
                    params[key] = options[key].join(',')
                }
            }
            return params
        },
        onPushErp () {
            let data = {
                checkAll: this.tableConfig.checkAll,
                loading: true,
                ids: this.tableConfig.table.selectedRow.join(',')
            }
            if (this.tableConfig.checkAll) {
                delete data.ids
                data = this.setSubmitData(data, this.formConfig.form.model)
            }
            this.loadingText = '推送'
            this.loading = true
            this.$http.get('http://yapi.yunzhonghe.com/mock/250/goods/supplierInfo/pushErp', {params: data}).then(res => {
                this.$message({type: 'success',message: res.message})
                this.loading = false
                res.success && this.getTableData()
            }).catch(() => { this.loading = true })
        },
        // 获取erp状态
        pullErpStatus () {
            let data = {
                checkAll: this.tableConfig.checkAll,
                loading: true,
                ids: this.tableConfig.table.selectedRow.join(',')
            }
            if (this.tableConfig.checkAll) {
                delete data.ids
                data = this.setSubmitData(data, this.formConfig.form.model)
            }
            this.loadingText = '获取erp状态'
            this.$http.get('http://yapi.yunzhonghe.com/mock/250/goods/supplierInfo/pullErpStatus', {params: data}).then(res => {
                if (res.success) {
                    this.$message.success(res.result)
                }
            }).catch(() => {})
        },
        onExport () {
            let data = {
                checkAll: this.tableConfig.checkAll,
                ids: this.tableConfig.table.selectedRow.join(',')
            }
            if (this.tableConfig.checkAll) {
                delete data.ids
                data = this.setSubmitData(data, this.formConfig.form.model)
            }
            this.loadingText = '导出'
            this.$http.get('http://yapi.yunzhonghe.com/mock/250/goods/supplierInfo/export', {params: data}).then(res => {
                this.$refs.proFormTable.export(res.result)
            })
        },
        remove (row) {
            this.$confirm('是否确认删除该供应商？', '温馨提示', {
                iconClass: 'my-icon-warning'
            }).then(() => {
                this.$http.post('http://yapi.yunzhonghe.com/mock/250/goods/supplierInfo/del', { id: row.id }).then(res => {
                    if (res.success) {
                        this.$message.success(res.message)
                        this.pageConfig.attr['current-page'] = 1
                        this.getTableData()
                    }
                })
            }).catch(() => {})
        },
        viewDetail (row) {
            this.$router.push({
                path: '/supplier/detail',
                query: {
                    id: row.id
                }
            })
        },
        editSupplier (row, step) {
            this.$router.push({
                path: '/supplier/edit',
                query: {
                    id: row.id,
                    step,
                    pushErpStatus: row.pushErpStatus.code
                }
            })
        },
        enabledStatus () {
            this.$confirm('是否禁用该供应商？', '温馨提示', {
                iconClass: 'my-icon-warning'
            }).then(() => {
                this.$http.post('http://yapi.yunzhonghe.com/mock/250/goods/supplierInfo/del', { id: row.id }).then(res => {
                    if (res.success) {
                        this.$message.success(res.message)
                        this.pageConfig.attr['current-page'] = 1
                        this.getTableData()
                    }
                })
            }).catch(() => {})
        }
    },
    created () {
        this.getTableData()
    },
    activated () {
        this.getTableData()
    }
}
</script>
